<template>
<div class="contain">
<vue-particles
        color="#fff"
        :particleOpacity="0.4"
        :particlesNumber="70"
        shapeType="circle"
        :particleSize="6"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.7"
        :linesDistance="160"
        :moveSpeed="5"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi">
</vue-particles>

  <div id="login-register">
        <div class="change">
          <nav>
            <li id="denglu"  @mouseover='onMouseOver()' style='border-bottom:3px solid #FFA00A;' @click="changePage('login')">登录账号</li>
             <li>|</li>
            <li id="zhuce"  @mouseover='onMouseOver()'  @click="changePage('register')" >注册账号</li>
          </nav>
        </div><div class="line"></div>
      <div class="login-form" id="login">
      <form action="#" >
        <h2>登录</h2>
        <input type="text"  id="uname" v-model="username" value=""  @blur='ckeck()' name="username" placeholder="用户名/邮箱/手机号码" />
        <div id="error_box1"></div>
        <input type="password" id="upass"  v-model="userword" name="password"  value=""  @blur="ckeck2()" placeholder="密码" />
        <div id="error_box2"></div>

        <button type="submit" id='bt1' >登录</button>
        <span><router-link class="nav-link" :to="{name: ''}">忘记密码</router-link></span>
      </form>
      </div>
      <div class="login-form" id='register'>
      <form action="#" >
        <h2>注册</h2>
        <input type="text"  id="NEWname"  value=""  @blur='aa' name="username" placeholder="请输入用户名/邮箱/手机号码" />
        <div id="error_box1"></div>
        <input type="password" id="NEWpass" name="password"  value=""  @blur="aa" placeholder="请输入密码" />
        <div id="error_box2"></div>
        <input type="password" id="NEW--C-pass" name="password"  value=""  @blur="aa" placeholder="请确认密码" />
        <div id="error_box3"></div>

        <button type="submit" id='bt2' >注册</button>
      </form>
      </div>
  </div>
 </div>
</template>


<style >

.contain {
box-shadow:2px 5px 5px darkgray ;
  position:relative;
  width: 1515px;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("~@/assets/t22.jpg") ;
  background-size: cover ;

}

.lizi{
  width: 1500px;margin-left: -10px;height: 700px;
}

#login-register {
  width: 360px;
  display: flex;
  margin-left:800px;
  flex-direction: column;
  padding: 20px;

  text-align: center;
  position: absolute;
  z-index: 100;
  background: inherit;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: -1px -1px 10px gray;
}
#login{display: block;}
#register{display: none;}

span .nav-link{margin-top:15px;float:right;margin-left: 100px; text-decoration: none;color: goldenrod;}
span .nav-link:hover{color: rgb(247, 9, 9);text-decoration: underline;}

.login-form::before {
  content: "";
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  background: inherit;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.4);
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: -1;
  filter: blur(8px);
  overflow: hidden;
}

.login-form h2 {
  font-size: 28 px;
  font-weight: 400;
  color: #0515eb;
}

.login-form input,
.login-form button {
  margin: 10px 0;
  height: 54px;
  width: 240px;
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 0 21px;
  color: #3d5245;
  font-size: 16px;
}

.login-form input::placeholder {
  color: #3d5245;
}

.login-form button {
  margin-top: 39px;
  text-align:center ;
  background-color: rgba(57, 88, 69, 0.3);
  color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.6s;
}

.login-form button:hover {
  background-color: rgba(2, 107, 46, 0.67);
}

.login-form button::before,
.login-form button::after {
  content: "";
  display: block;
  width: 120px;
  height: 100%;
  background: rgba(178, 197, 9, 0.5);
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  transform: skewX(-15deg);
  filter: blur(30px);
  overflow: hidden;
  transform: translateX(-100px);
}

.login-form button::after {
  width: 40px;
  background: rgba(230, 124, 4, 0.3);
  left: 60px;
  filter: blur(5px);
  opacity: 0;
}

.login-form button:hover::before {
  transition: 1s;
  transform: translateX(320px);
  opacity: 0.7;
}

.login-form button:hover::after {
  transition: 2s;
  transform: translateX(320px);
  opacity: 1;
}


nav li{float:left;list-style: none ;color:#022510 ; margin:20px;font-size: 20px;font-family: 'Times New Roman', Times, serif;font-weight: 700;}
nav{margin-left:50px;}
.line{ margin:2px;border-bottom:1px solid rgb(248, 165, 10) ;box-shadow:2px 2px 2px rgb(4, 5, 2);}


</style>

<script src="../../static/jquery/jquery-3.5.1.js"></script>
<script>
export default {
  data () {
    return {
      form: {
            username:'',
            userword:'',

      }
    }
  },

  methods: {
      ckeck()
      {
        var oUname = document.getElementById("uname");
        var oError1 = document.getElementById("error_box1");
        var isError = true;
        if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError1.innerHTML = "<span style='color:#f00;font-size:1px'>用户名请输入6-20位字符</span>";
        isError = false;
        return; }
        else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
         oError1.innerHTML = "<span style='color:#f00;font-size:1px'>首字符必须为字母</span>";
        return;
        }
        else for(var i=0;i<oUname.value.charCodeAt(i);i++){
        if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
         oError1.innerHTML = "<span style='color:#f00;font-size:1px'>必须为字母跟数字组成</span>";
         return;
        }
         else{oError1.innerHTML ="";}
       }
    },
      ckeck2()
    {
      var oUpass = document.getElementById("upass");
      var oError2 = document.getElementById("error_box2");
      if (oUpass.value.length > 20 || oUpass.value.length < 6) {
      oError2.innerHTML = "<span style='color:#f00;font-size:1px'>密码请输入6-20位字符</span>"
      isError = false;
      return;
     }
     else{oError2.innerHTML ="";}
    },
      onMouseOver(){
            denglu.style.cursor = 'pointer';
            zhuce.style.cursor = 'pointer';
        },
      changePage(val){
            var login_div = document.getElementById("login");
            var register_div = document.getElementById("register");
            if(val == 'login'){
                login_div.style.display = 'block';    // 切换效果的关键，思路就是将要显示的 display设置为 block
                register_div.style.display = 'none';  // 然后将要隐藏的盒子的 display 设置为 none

                denglu.style.borderBottom = '3px solid #FFA00A';
                zhuce.style.borderBottom = '';
               }
               else if(val == 'register'){
                login_div.style.display = 'none';     // 同上
                register_div.style.display = 'block';

                denglu.style.borderBottom = '';
                zhuce.style.borderBottom = '3px solid #FFA00A';
                }
        }
  }
}
</script>
